<template>
	<view>
		<view class="billNotDone-item" v-for="(item, index) in orderList" :key="index">
			<view class="billNotDone-item-top">
				<view class="flex">
					<view class="">
						<checkbox-group v-if="[3,10,20,30,39].indexOf(item.status)&&item.status==0" style="display: inline-block;"
							@change="select($event, item)">
							<label>
								<checkbox :value="checked" :checked="checked" @click="handleClick" />
							</label>
							<label>
							</label>
						</checkbox-group>
						<view class="" style="display: inline-block;">{{ item.which_period }}/{{ length }}</view>
					</view>
					<view class="">{{item.status==1?'已支付':'未支付'}}</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="billNotDone-item-bottom">
				<view class="flex">
					<view class="">扣款金额</view>
					<view class="text-color">{{ item.rent }}元</view>
				</view>
				<view class="flex">
					<view class="">预计扣款时间</view>
					<view class="text-color">{{ item.begin_time }}</view>
				</view>
				<view class="flex">
					<view class="">租期时间</view>
					<view class="text-color">{{ item.lease_time }}</view>
				</view>
			</view>
		</view>
		<view class="">
			<button v-if="goBuy==true" @click="goPay" :disabled="goBuy">{{buyBtn}}{{total}}元</button>
			<button v-else @click="goPay" :disabled="goBuy"
				style="background-color: #F72020;color: #fff;">{{buyBtn}}{{total}}元</button>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<uni-section title="请选择支付银行卡" type="line">
					<uni-data-select :localdata="uniCode" @change="change"></uni-data-select>
				</uni-section>
				<uni-section title="请输入验证码" type="line">
					<input type="text" placeholder="请输入验证码" :value="payCode"
						style="border: solid 1px #e5e5e5;height: 65rpx;width: 400rpx;" @input="handlepayCode">
					<button class="code_btn" :disabled="isSend1" @click="handleCode">{{codeName}}</button>
				</uni-section>
				<view class="" style="margin-top: -25rpx;">
					<button type="default" @click="goPay1">确认支付</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		readyPay,
		confirmPay,
		getOrderLease
	} from '@/api/order.js'
	export default {
		name: "billNotDone",
		props: ['order', 'olist'],
		data() {
			return {
				id: '',
				length: null,
				checked: false,
				list: [],
				total: 0,
				selected: [],
				uniCode: [],
				unique_code2: '',
				unique_code3: '',
				makePrice: '',
				codeName: '获取验证码',
				totalTime1: 60,
				isSend1: false, //禁用
				timer: '', //定时器
				payCode: '',
				goBuy: true,
				buyBtn: '去支付，共',
			};
		},
		created() {
			const list = uni.getStorageSync("uniqueCode");
			this.uniCode = list
		},
		methods: {
			select(e, item) {
				if (e.detail.value != '') {
					this.total = 0
					this.list.push(item)
				} else if (e.detail.value == '') {
					this.total = 0
					this.list.forEach((value, index, array) => {
						if (value.id == item.id) {
							array.splice(index, 1)
						}
					})
				}
				this.list.forEach(item => {
					this.selected.push(item.id)
					this.total += parseFloat(item.rent)
					this.goBuy = false
				})
			},
			handleClick(e) {},
			handlepayCode(e){
				this.payCode=e.detail.value
			},
			checkedChange(e) {
				this.checked = !this.checked
			},
			goPay() {
				this.type = 'center'
				this.$refs.popup.open(this.type)
			},
			goPay1() {
				if (this.payCode == '') {
					uni.showToast({
						title: "请先输入验证码",
						icon: 'error'
					})
					return
				}
				let data1 = {
					leaseId: this.selected,
					orderId: this.order,
					unique_code3: this.unique_code3,
					code: this.payCode
				}
				confirmPay(data1).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "支付成功",
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
					this.$refs.popup.close()
				})
			},
			change(e) {
				this.unique_code2 = e
			},
			handleCode() {
				let data = {
					unique_code2: this.unique_code2,
					txn_amt: this.total * 100,
					orderId: this.order
				}
				if (this.unique_code2 == '') {
					uni.showToast({
						title: "请先选择银行卡",
						icon: 'error'
					})
					return
				}
				readyPay(data).then(res => {
					this.unique_code3 = res[0]
					this.makePrice = res[1]
				})
				this.isSend1 = true
				this.codeName = this.totalTime1 + 's后重新发送'
				this.timer1 = setInterval(() => {
					this.totalTime1--
					this.codeName = this.totalTime1 + 's后重新发送'
					if (this.totalTime1 < 0) {
						clearInterval(this.timer1)
						this.codeName = '重新发送验证码'
						this.totalTime1 = 60
						this.isSend1 = false
					}
				}, 1000)
			},
		}
	}
</script>

<style scoped>
	.billNotDone-item {
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 25rpx;
		line-height: 2rem;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.text-color {
		color: #999;
		font-size: 20rpx;
	}

	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #eee;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-content {
		width: 700rpx;
		height: 450rpx;
	}

	.popup-content1 {
		width: 400rpx;
		height: 400rpx;
	}

	.code_btn {
		position: relative;
		left: 200rpx;
		bottom: 70rpx;
		height: 70rpx;
		width: 250rpx;
		font-size: 30rpx;
	}

	.btnCls2 {
		background: #F72020;
		color: #fff;
	}
</style>